<PageCard>

# FloatingDelayGroup

Provides context for a group of floating elements that should
share a `delay{:.key}` which temporarily becomes `1{:js}` ms
after the first floating element of the group opens.

```js
import {FloatingDelayGroup} from '@floating-ui/react';
```

This is useful to enable higher discovery of floating elements
when they have a hover delay (like tooltips) when their reference
elements are placed near each other.

<ShowFor packages={['react-dom']}>

<PackageLimited>@floating-ui/react only</PackageLimited>

</ShowFor>

</PageCard>

```js
function App() {
  return (
    <FloatingDelayGroup delay={{open: 1000, close: 200}}>
      <Tooltip label="One">
        <button>Ref</button>
      </Tooltip>
      <Tooltip label="Two">
        <button>Ref</button>
      </Tooltip>
      <Tooltip label="Three">
        <button>Ref</button>
      </Tooltip>
    </FloatingDelayGroup>
  );
}
```

## Example

- [Tooltip delay group](https://codesandbox.io/s/clever-aryabhata-yq3xyc?file=/src/Group.tsx)

## Usage

To enable delay grouping:

- Wrap the grouped floating components in a
  `<FloatingDelayGroup />{:js}` provider.
- Call `useDelayGroupContext(){:js}` to read the data from
  `<FloatingDelayGroup />{:js}`, which provides the
    <WordHighlight id='a'>delay</WordHighlight> for the group to
pass to the `useHover(){:js}` Hook.
- `useDelayGroup(){:js}`, a Hook called inside the component,
  enables grouping for the component.

```js /delay/#a
import {
  FloatingDelayGroup,
  useDelayGroupContext,
  useDelayGroup,
  useHover,
  useFloating,
} from '@floating-ui/react';

function Tooltip() {
  const {context} = useFloating();

  // `id` must be unique. Each `useFloating()` call returns a unique
  // `floatingId`.
  useDelayGroup(context, {
    id: context.floatingId,
  });

  const {delay} = useDelayGroupContext();
  const hover = useHover(context, {delay});
}
```

## Props

```ts
interface FloatingDelayGroupProps {
  delay: Delay;
  timeoutMs?: number;
}
```

### `delay{:.keyword}`

<Required />

default: `0{:js}`

The delay to use for the group.

```js
<FloatingDelayGroup
  // Both open and close delays
  delay={200}
  // Or, configured individually
  delay={{open: 1000, close: 200}}
>
  {/* ... */}
</FloatingDelayGroup>
```

### `timeoutMs{:.keyword}`

default: `0{:js}`

An optional explicit timeout to use for the group, which
represents when grouping logic will no longer be active after the
close delay completes. This is useful if you want grouping to
"last" longer than the close delay, for example if there is no
close delay at all.

```js
<FloatingDelayGroup timeoutMs={500}>
  {/* ... */}
</FloatingDelayGroup>
```

## Transitions

- <WordHighlight id="a">isInstantPhase</WordHighlight> is a boolean
  that determines whether the delay is currently in the instant phase.
  This allows you to make transitions instant/faster. See [`useTransitionStyles`](/docs/useTransition#usetransitionstyles).
- <WordHighlight id="b">currentId</WordHighlight> refers to the `id`
  of the floating element of the group currently open.

```js /isInstantPhase/#a /currentId/#b
const {currentId, isInstantPhase} = useDelayGroupContext();

const instantDuration = 0;
const duration = 200;

const {isMounted, styles} = useTransitionStyles(context, {
  duration: isInstantPhase
    ? {
        open: instantDuration,
        close:
          currentId === context.floatingId
            ? duration
            : instantDuration,
      }
    : duration,
  // ...
});
```
